<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
  <div style="width: 100%;height: 100%;position: relative;">
    <div style="position: absolute;top:-12px; right: 110px;font-family: 'font1';font-size: 23px;">
      {{ title }}
    </div>
    <Echart id="rightTop" :options="option" class="right_top_inner" ref="charts" height="320px" width="440px" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from "vue"
const { data, title } = defineProps(['data', 'title'])
const option = ref({})
const pageflag = ref(false)
const timer = ref(null)

onMounted(() => {
  getData();

})
onUnmounted(() => {
  clearData();

})
function clearData() {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
}
function getData() {
  init()
}

function init(xData, yData, yData2) {
  option.value = {
    xAxis: {
      type: 'category',
      data: data.xAix,
      axisLabel: {//坐标轴刻度标签的相关设置。
        interval: 0, //0：表示全部显示，1：表示隔一个显示一个，2：隔两个显示一个，3：三个显示一个，4：四个显示一个，5：五个显示一个，6：六个显示一个，7：七个显示一个，8：八个显示一个，9：九个显示一个，默认是5。
        formatter: function (params) {
          var newParamsName = "";// 最终拼接成的字符串
          var paramsNameNumber = params.length;// 实际标签的个数
          var provideNumber = 4;// 每行能显示的字的个数
          var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
          /**
           * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
           */
          // 条件等同于rowNumber>1
          if (paramsNameNumber > provideNumber) {
            /** 循环每一行,p表示行 */
            for (var p = 0; p < rowNumber; p++) {
              var tempStr = "";// 表示每一次截取的字符串
              var start = p * provideNumber;// 开始截取的位置
              var end = start + provideNumber;// 结束截取的位置
              // 此处特殊处理最后一行的索引值
              if (p == rowNumber - 1) {
                // 最后一次不换行
                tempStr = params.substring(start, paramsNameNumber);
              } else {
                // 每一次拼接字符串并换行
                tempStr = params.substring(start, end) + "\n";
              }
              newParamsName += tempStr;// 最终拼成的字符串
            }

          } else {
            // 将旧标签的值赋给新标签
            newParamsName = params;
          }
          //将最终的字符串返回
          return newParamsName
        }
      }
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
       trigger:"axis",
        formatter: function (params) {
            // 自定义显示内容
            var result = params[0].name + '<br/>'; // 显示类目名称
            console.log(result,params,"result")
            params.forEach(function (item) {
              console.log(item,"item.seriesName")
              result += '完成值' + ': ' + item.value + '<br/>' + '完成率' + ': ' + data.xXix[item.dataIndex] + '<br/>'; // 显示系列名称和值
            });
            return result;
          },

    },
    series: [
      {
        color: {
          type: 'linear',
          // x=0,y=1,柱子的颜色在垂直方向渐变
          x: 0,
          y: 1,
          colorStops: [
            // 0%处的颜色
            {
              offset: 0,
              color: '#02325c',
            },
            // 50%处的颜色
            {
              offset: 0.5,
              color: '#0076b2',
            },
            // 100%处的颜色
            {
              offset: 1,
              color: '#04b4e5',
            },
          ],
          global: false, // 缺省为 false
        },
        stack: "a",
        axisLabel: {
          interval: 0  //设置间隔为0
        },
        data: data.yAix,
        barWidth: '30%',
        itemStyle: {
          borderRadius: [100, 100, 0, 0],
        },
        label: {
          show: true,
          formatter: function (params) {
            console.log(params, "params")
            return data.xXix[params.dataIndex]
          },
          position: 'top',
          color: '#fff',
        },
        backgroundStyle: {

          borderRadius: 5
        },
        type: 'bar',
        markPoint: {
          symbol: 'rect',
          symbolSize: [0, 0],
          data: data.yYAix,
          label: {
            show: true,
            position: 'top',
            color: '#ffffff',
            fontSize: 12,
            fontWeight: 'bold',
            offset: [0, 0]
          },
          itemStyle: {
            color: 'transparent'
          }
        }
      },

    ]

  };
}
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}

:deep(.echarts-tooltip) {
  z-index: 9999 !important;
}
</style>